<style lang="less" scoped>
.review-report {
  width: 100%;
  height: 100%;

  &_title {
    height: 40px;
    background: url('~@/images/contenttitle.png');
    background-repeat: no-repeat;
    background-position: bottom;
    text-align: center;
    color: #00F6FF;
    line-height: 40px;
    margin-bottom: 5px;
  }

  &_content {
    height: calc(100% - 45px);
  }

  /deep/.el-table {
    background-color: #1C479F;
  }

  /deep/.el-table th.is-leaf,
  .el-table td {
    background-color: #0973ca;
    border-bottom: 1px solid #0973ca;
  }

  /deep/.el-table tr {
    background-color: #1C479F;
  }

  /deep/.el-table td {
    border-bottom: 1px solid #00BFE9;
  }

  /deep/.el-table .cell {
    color: #fff;
  }

  /deep/.el-table th>.cell {
    color: #fff;
  }

  /deep/.el-table--medium td {
    padding: 7px 0;
  }

  /deep/.el-table tbody tr:hover>td {
    background-color: unset !important;
  }

  /deep/.el-table th.gutter,
  .el-table td.gutter {
    display: none;
    background-color: #0973ca;
  }

  ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: #034694;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #0A306F;
    border-radius: 3px;
  }
}
</style>

<template>
  <div class="review-report">
    <div class="review-report_title">
      <span>数据审核上报情况</span>
    </div>
    <div class="review-report_content">
      <el-table height="100%" :data="tableData" style="table-layout:fixed;">
        <!-- <el-table-column label="" align="center" prop="stageName" :width="flexColumnWidth('string', tableData)" /> -->
        <el-table-column label="" align="center" prop="stageName"/>
        <el-table-column label="日（人次）" align="center" prop="numDay" />
        <el-table-column label="月（人次）" align="center" prop="numMonth" />
        <el-table-column label="年累计" align="center" prop="numYear" />
      </el-table>
    </div>
  </div>
</template>

<script>
import { getNumAuditUpload, getStrokeNumAuditUpload } from '@/api/comprehensive/reviewReport'
export default {
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      tableData: [],
      setInter: null
    }
  },
  watch: {
    'isStrock'() {
      this.init()
    }
  },
  mounted() {
    this.init()
    this.setInter = setInterval(() => {
      this.init()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    init() {
      // this.tableData = []
      if (this.isStrock == 'chestPain') {
        getNumAuditUpload({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              this.tableData = res.data
            }
          }
        })
      } else if (this.isStrock == 'stroke') {
        getStrokeNumAuditUpload({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              this.tableData = res.data
            }
          }
        })
      }
    },
    flexColumnWidth(str, arr1, flag = 'max') {
      // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
      // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
      // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。

      str = str + ''
      let columnContent = ''
      if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {
        return
      }
      if (!str || !str.length || str.length === 0 || str === undefined) {
        return
      }
      if (flag === 'equal') {
        // 获取该列中第一个不为空的数据(内容)
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i][str].length > 0) {
            // console.log('该列数据[0]:', arr1[0][str])
            columnContent = arr1[i][str]
            break
          }
        }
      } else {
        // 获取该列中最长的数据(内容)
        let index = 0
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i][str] === null) {
            return
          }
          const now_temp = arr1[i][str] + ''
          const max_temp = arr1[index][str] + ''
          if (now_temp.length > max_temp.length) {
            index = i
          }
        }
        columnContent = arr1[index][str]
      }
      // console.log('该列数据[i]:', columnContent)
      // 以下分配的单位长度可根据实际需求进行调整
      let flexWidth = 0
      if (columnContent) {
        for (const char of columnContent) {
          if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
            // 如果是英文字符，为字符分配8个单位宽度
            flexWidth += 8
          } else if (char >= '\u4e00' && char <= '\u9fa5') {
            // 如果是中文字符，为字符分配15个单位宽度
            flexWidth += 15
          } else {
            // 其他种类字符，为字符分配8个单位宽度
            flexWidth += 8
          }
        }
      }

      if (flexWidth < 80) {
        // 设置最小宽度
        flexWidth = 80
      }
      // if (flexWidth > 250) {
      //   // 设置最大宽度
      //   flexWidth = 250
      // }
      return flexWidth + 'px'


    }
  }
}
</script>
